<template>
<div id="setbody">
	<el-divider></el-divider>
	<el-tabs tab-position="left">
		<el-tab-pane><span slot="label"><i class="el-icon-setting"></i> 基本设置</span>
			<el-form style="margin-left:80px;">
				<el-input type="hidden" v-model="base.id"></el-input>
				<el-input type="hidden" v-model="base.password"></el-input>
				<el-form-item label="头像：">
					<el-avatar :size="60" :src="base.imgurl==''?circleUrl:base.imgurl"></el-avatar>
					<single-upload  v-model="base.imgurl"></single-upload>
				</el-form-item>
				<el-form-item label="昵称：">
					<el-input style="width: 300px;" v-model="base.username"></el-input>
				</el-form-item>
				<el-form-item label="性别：">
					<el-radio-group v-model="base.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="邮箱：">
					<el-input style="width: 300px;" v-model="base.email"></el-input>
				</el-form-item>
				<el-form-item label="手机：">
					<el-input style="width: 300px;" v-model="base.phone"></el-input>
				</el-form-item>
				<el-form-item label="个签：">
					<el-input type="textarea" style="width: 300px;" v-model="base.intro"></el-input>
				</el-form-item>
				 <el-form-item>
					<el-button type="primary" @click="onModify()">确认修改</el-button>
				</el-form-item>
			</el-form>
		</el-tab-pane>
		<el-tab-pane><span slot="label"><i class="el-icon-setting"></i> 修改密码</span>
			<el-form>
				<el-form-item label="原密码：  " style="margin-left:80px;">
					<el-input type="password" style="width: 300px;" v-model="pwd.oldPassword"></el-input>
				</el-form-item>
				<el-form-item label="新密码：  " style="margin-left:80px;">
					<el-input type="password" style="width: 300px;" v-model="pwd.newPassword"></el-input>
				</el-form-item>
				<el-form-item label="确认密码：" style="margin-left:67px;">
					<el-input type="password" style="width: 300px;" v-model="pwd.againPassword"></el-input>
				</el-form-item>
				<el-form-item style="margin-left:350px;">
					<el-button type="primary" @click="onPwd()">确认修改</el-button>
				</el-form-item>

				 
			</el-form>
		</el-tab-pane>
		<el-tab-pane><span slot="label"><i class="el-icon-setting"></i> 角色管理</span>
			角色管理
		</el-tab-pane>
		<el-tab-pane><span slot="label"><i class="el-icon-setting"></i> 定时任务补偿</span>
			定时任务补偿
		</el-tab-pane>
	</el-tabs>

	<el-backtop></el-backtop>
</div>
</template>

<script>
  import SingleUpload from "@/components/upload/singleUpload";
// import SingleUpload from './upload/singleUpload.vue';
  export default {
	components: { SingleUpload },
    data() {
      return {
		loginUser: '',  // 登录用户名
		pwd: {
			oldPassword: '',
			newPassword: '',
			againPassword: '',
		},
        base: {  // 基本信息
			id: 0,
			password: '',
			username: '',
			gender: '',
			email: '',
			phone: '',
			intro: '',
			imgurl: '',
		},
		circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      };
    },
	created() {
		this.getData();
	},
	methods: {
		getData(){
			this.loginUser = sessionStorage.getItem("loginUser");
			if(this.loginUser!=''){
				this.axios.get(`http://120.77.213.195:8001/setting/getData?username=${this.loginUser}`).then((res) => {
					console.log(res);
					if(res.data.code == 0){
						this.base = res.data.user;
					}
				}).catch((err) => {
					console.log(err);
				});
			}
		},
		onModify(){
			this.axios.post(`http://120.77.213.195:8001/setting/modify`,this.base).then((res) => {
				console.log(res);
				if(res.data.code==0){
					this.$message({
						message: '修改成功！',
						type: 'success'
					});
					sessionStorage.setItem("loginUser",this.base.username);
					sessionStorage.setItem("token",res.data.token);
				}else if(res.data.code == 500){
					this.$message({
						message: res.data.error,
						type: 'warning'
					});
				}
			}).catch((err) => {
				console.log(err);
			});
		},
		onPwd(){
			this.axios.post(`http://120.77.213.195:8001/setting/pwd?userid=${this.base.id}`,this.pwd).then((res) => {
				console.log(res);
				if(res.data.code==0){
					this.$message({
						message: '修改成功！',
						type: 'success'
					});
					sessionStorage.setItem("token",res.data.token);
				}else if(res.data.code == 500){
					this.$message({
						message: res.data.error,
						type: 'warning'
					});
				}
			}).catch((err) => {
				console.log(err);
			});
		},
	},
  };
</script>

<style>
#setbody{
	margin: 10px 22%;
	text-align: left;
}

</style>